<template>
    <div class="wrapper">
        <!--基本信息-->
        <div>
            <!--标题-->
            <div class="title">
                <div class="title_block"></div>
                <div class="title_text">
                    基本信息
                </div>
            </div>
            <!--field-->
            <div class="field_item">
                <div class="field_title">
                    年龄
                </div>
                <div>
                    <Field v-model="form.tabBasic.B02"/>
                </div>
            </div>
            <div class="field_item">
                <div class="field_title">
                    性别
                </div>
                <div>
                    <Cell is-link :title="form.tabBasic.B03" @click="genderShow=true"/>
                </div>
            </div>
            <div class="field_item">
                <div class="field_title">
                    地点
                </div>
                <div>
                    <Cell is-link :title="form.tabBasic.B01" @click="locationShow=true"/>
                </div>
            </div>
        </div>
        <Popup position="bottom" v-model="genderShow">
            <Picker show-toolbar :columns="genderOptions " @confirm="genderConfirm" @cancel="genderShow=false"/>
        </Popup>
        <Popup position="bottom" v-model="locationShow">
            <Picker show-toolbar :columns="locationOptions " @confirm="locationConfirm" @cancel="locationShow=false"/>
        </Popup>
        <!--基本信息-->

        <!--保存按钮-->
        <div class="submit">
            <div class="submit_btn" @click="save">
                保存
            </div>
        </div>
    </div>
</template>

<script>
    import {Field, Cell, Popup, Picker, Toast} from 'vant';

    const genderOptions = ['男', '女']
    const locationOptions = ['病房', '门诊']
    export default {
        name: "add",
        props: {
            scheduleId: String
        },
        components: {
            Field,
            Cell,
            Popup,
            Picker,
            Toast
        },
        data() {
            return {
                form: {
                    callPlanId: this.scheduleId,
                    prodName: '',
                    prodId: '',
                    tabBasic: {
                        B02: '',
                        B03: '',
                        B01: ''
                    },
                    tabDisease: {},
                    tabComplication: {},
                    treatment: {}
                },
                genderShow: false,
                locationShow: false,
                genderOptions: genderOptions,
                locationOptions: locationOptions
            }
        },
        methods: {
            genderConfirm(value, index) {
                this.form.tabBasic.B03 = value
                this.genderShow = false
            },
            locationConfirm(value, index) {
                this.form.tabBasic.B01 = value
                this.locationShow = false
            },
            save() {
                if (!this.form.tabBasic.B02) {
                    Toast('请填写年龄')
                    return
                }
                if (!this.form.tabBasic.B03) {
                    Toast('请选择性别')
                    return
                }
                if (!this.form.tabBasic.B01) {
                    Toast('请选择地址')
                    return
                }
                this.$emit('save', Object.assign({}, this.form))
                this.form = {
                    tabBasic: {
                        B02: '',
                        B03: '',
                        B01: ''
                    },
                    tabDisease: {},
                    tabComplication: {},
                    treatment: {}
                }
                this.$emit('hide')
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>
    .wrapper {
        padding: 20px;
    }

    .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        /*margin-bottom: 10px;*/
    }

    .title_block {
        background: #ACB318;
        width: 4px;
        height: 20px;
    }

    .title_text {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        text-align: justify;
        line-height: 24px;
        margin-left: 12px;
    }

    .field_title {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.22px;
        text-align: justify;
        line-height: 16px;
    }

    .field_item {
        margin-top: 10px;
    }

    .submit {
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .submit_btn {
        width: 90%;
        height: 48px;
        background: #454592;
        border-radius: 2px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .mt20 {
        margin-top: 20px;
    }

    .van-cell {
        padding: 10px 0px !important;
        border-bottom: 1px solid #ddd;
    }
</style>